<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import computing from './components/index.vue'
import record from './components/record.vue'
const computingComponent = ref(computing)
const recordComponent = ref(record)
const tabs = ref([
  {
    label: '算力认购',
    component: computingComponent
  },
  {
    label: '认购记录',
    component: recordComponent
  },
])
const selectIndex = ref(0)
const tabsChange = (tab,index)=>{
  if(selectIndex.value == index) return
  selectIndex.value = index
}
</script>
<template>
  <div class="container px-30 relative">
    <div class="top_img absolute left-0 top-0 w-100% h-354 pt-60px pl-[30px]" v-show="selectIndex == 1">
      <img src="/src/assets/imgs/public/topBg_text.png" class="w-388" alt="">
    </div>
    <div :class="['relative z-1', selectIndex == 1 ? 'pt-184px' : 'pt-50px']">
      <div class="flex items-center">
        <div class="flex items-center p-8px rounded-[10px] bg-[#272727]">
          <div :class="['text-[24px] text-[#fff] font-[400] font-pinfang px-40px py-14px rounded-[10px]', selectIndex == index ? 'bg-[#F76938]' : '']"
            v-for="(value, index) in tabs" :key="index" @click="()=>tabsChange(value,index)">{{ value.label }}</div>
        </div>
      </div>
    </div>
    <div class="mt-30px relative z-1">
      <component :is="tabs[selectIndex].component"></component>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: calc(100vh - 80px);
  background-color: #101010;
  padding-bottom: 24px;
}

.top_img {
  background: url('/src/assets/imgs/public/top_bg.png') no-repeat;
  background-size: 100% 100%;
}
</style>